Blog Pion79

Screenshot from 2026-01-27 18-02-22.png

1. 번들(Bundle)이란

여러 개의 파일(자바스크립트, CSS, 이미지 파일 등)을 읽고, 해석해서, 순서를 정리하여 하나 또는 몇 개의 파일로 묶는(Bundle) 프로그램을 말합니다.

■ 필요성

브라우저가 자바스크립트 코드를 실행할 때, 원래는 한 번에 하나의 파일만 처리할 수 있습니다. 처리해야 할 파일 수가 많아지면 다음과 같은 문제가 발생할 수 있어 **번들러(Webpack, Vite, Parcel)**를 이용해 파일을 묶습니다.

파일을 한 개씩 받아오게 되면 느려진다.
서로 의존성이 꼬일 수 있다.
네트워크 비용이 커진다.

■ 번들 전 vs 번들 후

번들 전

src/
├── main.js
├── utils.js
├── event.js
├── style.css

번들 후

dist/
├── bundle.js
├── bundle.css

■ 번들러 종류

Webpack
Parcel
Rollup
Vite (Production 빌드 할 때 Rollup을 사용)

2. Rollup 이란?

Rollup은 자바스크립트 모듈 번들러 중 하나입니다.

■ 주요 특징

ES Module(ESM) 기반의 트리쉐이킹(Tree-shaking)과 번들 최적화에 특화된 툴입니다.
번들 파일이 작고 빠릅니다.
자바스크립트(JavaScript) 모듈 번들러입니다.
Vite가 프로덕션 빌드할 때 사용하는 번들러가 바로 Rollup입니다.

■ 동작 원리 (순서)

1) 엔트리 포인트 설정

rollup.config.js 에서 input 옵션으로 엔트리 파일(시작 파일)을 설정합니다.

export default {
  input: "src/main.js",
  output: {
    file: "dist/bundle.js",
    format: "esm",
  },
};

2) 의존성 그래프 생성

엔트리 파일로부터 import / export 를 분석하여, **모듈간 의존성 그래프(Dependency Graph)**를 구축합니다.
ESM 방식으로서 **정적 분석(static analysis)**이 가능하여 import/export 위치와 사용 여부를 정확히 파악할 수 있습니다.

3) 트리 쉐이킹(Tree Shaking)

의존성 그래프를 분석하여 **사용되지 않는 코드(Dead Code)**를 제거합니다.
import 했지만, 사용하지 않는 함수, 변수, 모듈 등은 최종 번들에서 빠집니다.
예시) unused 함수는 번들에 포함되지 않습니다.

// util.js
export function used() {
  console.log("used");
}
export function unused() {
  console.log("unused");
}

// main.js
import { used } from "./util.js";
used();

4) 플러그인 실행

설치한 플러그인은 순서대로 실행됩니다.
플러그인은 코드 변환, 파일 읽기, 타입스크립트 처리, Babel 트랜스파일, 이미지 압축 등 다양한 일을 담당할 수 있습니다.
예시) Babel 플러그인

import babel from "@rollup/plugin-babel";

5) 코드 번들링

의존성 그래프를 바탕으로 모듈을 하나의 파일 또는 여러 파일로 합치는 과정입니다.
output.format 옵션에 따라서 esm, cjs, iife, umd 등 다양한 형식으로 결과물이 생성됩니다.

6) 코드 출력(Output)

최종적으로 번들된 코드가 output.file에 저장됩니다.
이 때 코드 압축(minify) 이나 소스맵 생성도 함께 처리 가능합니다.

3. Vite와 Rollup 관계

■ Vite

개발 서버 + 번들러 통합 툴입니다.
Vite가 프로덕션 번들러로 Rollup을 내부에 사용하는 구조입니다.
Vite 환경별 관계
- 개발 환경(vite dev): ESM 방식으로 실시간 변환하므로 Rollup 번들링 없이 브라우저에 전달합니다.
- 프로덕션(vite build): vite.config.js 설정 읽기 → 내부적 Rollup API 호출 → build.rollupOptions 설정을 적용해 빌드 → Rollup 이 모듈을 번들링 및 최적화 수행 → 결과물을 /dist에 출력합니다.

■ Rollup

모듈 번들러 (트리 쉐이킹, 코드 분할 담당)
Vite 프로덕션 빌드 내부에서 동작함

Vite에서 Bundle과 Rollup?